<template>
  <div class="myApproval">
    <div class="nav">
       <div class="nav_left" 
         @click="onTap('whole',true)" 
         :class="is_current?'current_nav':''"
        >
         全部
       </div>
       <div class="nav_right"  
         @click="onTap('unread',false)" 
        :class="!is_current?'current_nav':''"
        >
         未读<span v-show="unreadNum">({{unreadNum}})</span>
       </div>
    </div>
    <div v-show="is_current">
      <TicketSearch
        ref="whole"
        :is_show_state = true
        :is_top = false
        category = 'all'
        cc = 'all'
      ></TicketSearch>
    </div>
    <div v-show="!is_current">
      <TicketSearch
        ref="unread"
        :is_show_state = true
        :is_top = false
        category = 'all'
        cc = 'unread'
      ></TicketSearch>
    </div>
  </div>
</template>

<script>
import TicketSearch from '@/components/TicketSearch'
export default {
  data(){
    return{
      is_current:true,
      name:"whole",
      unreadNum:null,
      is_click:true,
    }
  },
  mounted(){
    
  },
  methods:{
    changeReadings(num){
      this.unreadNum = num + ''
    },
    onTap(name,is_really){
      this.name = name
      this.is_current = is_really
      this.is_click = is_really
    },
    callMethod(){
      this.$refs[this.name].change()
    }
  },
  watch:{
    is_click(){
      this.callMethod()
    }
  },
  //使用缓存组件时调用的钩子
  activated(){
    if(this.$store.state.is_cache){
      this.is_current = true
      this.name = 'whole'
      this.$refs.whole.clearOptions()
      this.$refs.unread.clearOptions()
    }else{
      this.$refs[this.name].onSearch()
    }
  },
  components:{
    TicketSearch,
  },
}
</script>

<style scoped lang="less">
.myApproval{
  // background: #fff;
  position: absolute;
  top:0;
  bottom: 0;
  width: 100%;
  .nav{
    width: 100%;
    height: 45px;
    font-size: 15px;
    line-height: 45px;
    background: #fff;
    display: flex;
    .nav_left{
      width: 50%;
      text-align: center;
      border-bottom: 1px solid #F7F7F7;
    }
    .nav_right{
      width: 50%;
      text-align: center;
      border-bottom: 1px solid #F7F7F7;
    }
    .current_nav{
      color:#3396FB;
      border-bottom: 2px  solid #3894F9;
    }
  }
}
</style>